<template>
  <div class="d-layout-body chapter-tree">
    <slot name="layout-side">
      <div v-if="list && list.length > 0" class="d-layout-side">
        <list-menu :data="list" :class-name="sideMenuClass" @onClickItem="handleClickItem" />
        <div class="chapter-actions d-text-center">
          <span @click="handleAdd" class="d-text-linker d-text-primary"><PlusIcon /></span>
          <span v-if="!!archiveId" @click="handleEdit" class="d-text-linker d-text-primary"><EditIcon /></span>
        </div>
      </div>
    </slot>
    <slot name="layout-content">
      <div class="d-layout-content">
        <slot name="contenter">
          <div class="d-contenter">
            <router-view :key="$route.fullPath" />
          </div>
        </slot>
      </div>
    </slot>
  </div>
</template>

<script>
import { PanerGrid } from '@daelui/vdog/dist/pages.js'
import { Grid, GridColumn, FormCalendar, Pager, ListMenu } from '@daelui/vdog/dist/components.js'
import { RefreshIcon, PlusIcon, EditIcon, DeleteIcon, TreeIcon } from '@daelui/vdog/dist/icons.js'
import chSer from '@/service/action/chapter.action.js'
import { getter } from '@/service/stock/index.js'
import { treer } from '@daelui/dogjs/dist/components.js'

export default {
  components: {
    PanerGrid,
    Grid,
    GridColumn,
    RefreshIcon,
    PlusIcon,
    EditIcon,
    DeleteIcon,
    TreeIcon,
    FormCalendar,
    Pager,
    ListMenu
  },

  data () {
    return {
      // 搜索条件
      search: {
        name: '',
        labels: '',
        description: '',
        createTime: '',
        updateTime: ''
      },
      chapterId: '', // 章节id
      archiveId: '', // 文档id
      // 左菜单列表
      list: [],
      sideMenuClass: '',
      // 状态
      statusList: getter.statusList(),
      // 产品列表
      productList: []
    }
  },

  methods: {
    /**
     * @function 初始化视图
    */
    initView () {
      let params = this.$route.params
      this.archiveId = this.$route.id
      // 新建
      if (!params.chapterId) {
        this.$router.push(this.getMicroRoute('/archive/chapter/list'))
      } else {
        this.chapterId = params.chapterId
        this.loadItem(params.chapterId)
      }
    },
    /**
     * @function 加载数据
    */
    loadItem (chapterId) {
      chSer.queryNodeTree({ id: chapterId }).then(res => {
        let list = res.data.list
        list = Array.isArray(list) ? list : []
        treer.forEach({ data: list, callback: function (item) {
          item.text = item.name
        }})
        this.list = list
      })
    },
    handleClickItem (item) {
      // 产品
      let path = `/archive/chapter/tree/${this.chapterId}/view/${item.id}`
      if (!item.hasOwnProperty('chapterId')) {
        this.$router.push(this.getMicroRoute(path))
        return true
      }
      // 页面
      path = `/archive/chapter/tree/${this.chapterId}/page/${item.id}`
      this.archiveId = item.id
      this.$router.push(this.getMicroRoute(path))
    },

    /**
     * @function 添加
    */
    handleAdd () {
      this.$router.push(this.getMicroRoute(`/archive/chapter/tree/${this.chapterId}/item`))
    },

    /**
     * @function 编辑
    */
    handleEdit () {
      this.$router.push(this.getMicroRoute(`/archive/chapter/tree/${this.chapterId}/item/${this.archiveId}`))
    }
  },

  mounted () {
    this.initView()
  }
}
</script>

<style scoped>
.d-form-label {
  width: 80px;
}
</style>

<style lang="less">
.chapter-tree {
  .d-layout-side {
    position: relative;
    margin-right: 8px;
    padding-bottom: 42px;
    background: #fff;
    border: 1px solid #e0e0e0;
    & + .d-layout-content {
      & > .d-contenter {
        padding: 0;
      }
    }
  }
  .chapter-actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    .d-text-linker {
      margin: 0 4px;
    }
  }
}
</style>
